<template>
    <DialogCom :draggable="true" :title="title" :width="'347'" :visible="isVisible" @close="close" @confirm="confirm">
        <template v-slot:content>
            <el-form ref="ruleFormRef" :model="formData" :rules="rules" label-width="100px" class="demo-ruleForm"
                status-icon>
                <el-form-item label="名称" >
                    <el-input v-model="formData.name" />

                </el-form-item>

                <el-form-item label="服务地址" prop="url">
                    <el-input v-model="formData.url" />
                </el-form-item>
                <el-form-item label="地理范围" v-if="props.type == 'imagery' || props.type == 'terrain'">
                    <div class="rectangle">
                        <el-input v-model="formData.rectangle[0]" type="number" />
                        <el-input v-model="formData.rectangle[1]" type="number" />
                        <el-input v-model="formData.rectangle[2]" type="number" />
                        <el-input v-model="formData.rectangle[3]" type="number" />
                    </div>
                </el-form-item>
            </el-form>

        </template>
    </DialogCom>
</template>
<script setup>
import DialogCom from "@/components/common/DialogCom.vue";
import { defineEmits, ref } from "vue";


const props = defineProps({
    isVisible: {
        type: Boolean,
        default: false,
    },
    close: {
        type: Boolean,
        default: false,
    },
    title: {
        type: String,
        default: "",
    },
    type: {
        type: String,
        default: "",
    }
});
const emits = defineEmits(["close", "confirm"]);

const ruleFormRef = ref('')

const rules = ref({
    // name: [{ required: true, message: '请输入名称', trigger: 'change' }],
    url: [{ required: true, message: '请选择服务地址', trigger: 'change' }],
})

const formData = ref({
    name: "",
    url: "",
    rectangle: [-180, -90, 180, 90],
    type: props.type,
})

// 关闭按钮
const close = () => {
    emits('close')
}
// 确认
const confirm = async () => {
    ruleFormRef.value.validate(valid => {
        formData.value.rectangle = formData.value.rectangle.map(item =>item?item:0)
        if (valid) {
            const data = {
                ...formData.value,
            }
            emits('confirm', data)
        }
    })

}


</script>

<style scoped>
.app-input {
    width: 78%;
}

.el-button {
    background: var(--primary-blue-color);
    color: white;
    width: 66px;
}

.avatar-uploader .avatar {
    width: 130px;
    height: 130px;
    display: block;
}

.zoom,
.condition {
    width: 438px;
    display: flex;
    justify-content: space-around;
}

.zoom .el-input {
    width: 200px;
}

.condition .el-input,
.condition .el-select {
    width: 100px;
}

:deep(.el-dialog) {
    width: 500px;
}

.content {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.file {
    width: 100%;
    height: 40px;
    display: flex;
    justify-content: flex-end;
}

#editor-content {
    width: 100%;
    background-color: #1e1e1e;
}

.rectangle {
    display: flex;
}
</style>